{% extends 'base_product.html' %}

{% block body %}
<div class="px-4 pt-5 my-5 text-center border-bottom container">
   <h1 style="text-shadow: 4px 4px 4px #4b4a4ad7;color: rgb(85, 82, 82);font-weight: bolder;">{{ the_title }}</h2>
      <form class="p-4 p-md-5 rounded-3" method='POST' action='/search4' style="margin-top: -10px;">
         <h5 class="h5">Use this form to submit a search request:</h5>
         <div class="row g-7">
            <label class="form-lable little"><span>Phrase:</span></label>
            <div class="sp">
               <input type="text" class="form-control" name="phrase" width="60">
            </div>
            <lable class="form-lable sp little"><span>Letters:</span></lable>
            <div class="sp">
               <input type="text" class="form-control" name="letters" value="aeiou">
            </div>
         </div>
         <p class="sp little"><span>When you're ready, click this button:</span></p>
         <p class="sp"><input value='Do it!' type='SUBMIT' class="btn"></p>
      </form>
      <style>
         .sp {
            margin-top: 15px;
         }

         .little {
            font-family: impact, sans-serif;
            color: #6b6a6a;
            font-size: 20px;
            word-spacing: 3pt;
         }
         .btn{
            background-color: #5f5e5e;
            border: #424242;
            border-radius: 12px;
            padding: 10px 30px 10px 30px;
            color: white;
         }
         .btn:hover{
            background-color: #3b3b3b;
            color: white;
         }
         .h5{
            color: #424242;
            text-shadow: 2px 2px 2px #4b4a4ad7;
            margin-top: -10px;
         }
      </style>
      {% endblock %}